<template>
  <div class="comment-list-container">
    <h2>评论列表</h2>
    <ul class="comment-list">
      <li v-for="comment in comments" :key="comment.id">
        <div class="comment-avatar">
          <img src="https://picsum.photos/30/30" alt="Avatar" />
        </div>
        <div class="comment-details">
          <div class="comment-nickname">{{ comment.user_nick }}</div>
          <div class="comment-content">{{ comment.comment }}</div>
          <div class="comment-time">
            {{ new Date(comment.created_at).toLocaleString() }}
          </div>
        </div>
      </li>
    </ul>
    <form @submit.prevent="addComment">
      <input v-model="newComment" placeholder="请输入评论内容" />
      <button type="submit">提交评论</button>
    </form>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted, toRefs, watch } from "vue";
import axios from "axios";

export default defineComponent({
  props: {
    jokeIndex: {
      type: Number,
      required: true,
    },
    jokeId: {
      type: Number,
      required: true,
    },
  },
  emits: ["commentAdded"], // 定义自定义事件
  setup(props, { emit }) {
    // 从 context 中解构出 emit 函数
    const { jokeIndex, jokeId } = toRefs(props);
    const comments = ref<any[]>([]);
    const newComment = ref("");
    const user_id = ref(
      localStorage.getItem("userInfo")
        ? JSON.parse(localStorage.getItem("userInfo")!).id
        : null
    );
    const user_nick = ref(
      localStorage.getItem("userInfo")
        ? JSON.parse(localStorage.getItem("userInfo")!).user_nick
        : null
    );

    const fetchComments = async () => {
      try {
        const response = await axios.get(
          `http://localhost:3000/api/get-comments/${jokeId.value}`
        );
        comments.value = response.data.comments;
      } catch (error) {
        console.error("获取评论出错:", error);
      }
    };

    const addComment = async () => {
      if (newComment.value && user_id.value && user_nick.value) {
        try {
          await axios.post("http://localhost:3000/api/add-comment", {
            joke_id: jokeId.value,
            user_id: user_id.value,
            comment: newComment.value,
            user_nick: user_nick.value,
            nickname: user_nick.value, // 添加 nickname 字段
          });
          newComment.value = "";
          fetchComments();
          emit("commentAdded"); // 触发事件
        } catch (error) {
          console.error("添加评论出错:", error);
        }
      }
    };

    onMounted(() => {
      fetchComments();
    });

    watch(jokeId, async () => {
      await fetchComments();
    });

    return {
      comments,
      newComment,
      addComment,
    };
  },
});
</script>

<style scoped>
.comment-list-container {
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 8px;
  background-color: #f9f9f9;
}

.comment-list {
  list-style-type: none;
  padding: 0;
}

.comment-list li {
  display: flex;
  margin-bottom: 15px;
  background-color: #fff;
  border-radius: 8px;
  padding: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.comment-list li:hover {
  transform: translateY(-3px);
}

.comment-avatar {
  margin-right: 10px;
}

.comment-avatar img {
  border-radius: 50%;
}

.comment-details {
  flex: 1;
}

.comment-nickname {
  font-weight: bold;
  margin-bottom: 3px;
  color: #555;
}

.comment-content {
  margin-bottom: 5px;
  color: #777;
}

.comment-time {
  font-size: 12px;
  color: #999;
}

form {
  display: flex;
  margin-top: 20px;
}

input {
  flex: 1;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  margin-right: 10px;
}

button {
  background-color: #007bff;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

button:hover {
  background-color: #0056b3;
}
</style>
